<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div v-html="flag"></div> -->
    <button>点击我</button>
    <div class="exchange"></div>
    <script>
        // 模板字符串 
        // ES5 ：字符串 拼接  单双引号的混用。
        // var str = "我是名字是\"张三\",我的年龄是\"22\"";
        // console.log(str);

        // var htmlStr = "<div>"+
        //             "我是div"+
        //             "</div>"
        //     document.body.innerHTML = htmlStr;

        // ES6 模板字符串 ： 定义 `字符串`
        // let name = "张三";
        // let age = 20;
       

        // 插值表达式 可以解析js里的变量 ，还可以解析 有返还值的表达式；
        var a = 1 + 1;
        var flag = true;
        var myname = flag?'张三':"李四"; 
        function fn(){
            return "hello";
        }
        flag =!flag
        let str = `我${1+4}的名字是${flag?'张三':"李四"}，我的年龄是${fn()}`;

        console.log(str);

        // let btn = document.querySelector("button");
        // let flag = true;
        // btn.onclick = function(){
        //     flag = !flag;
        //     console.log(flag);
        //     var divele = `<div style="color:${flag?'red':'blue'}">我是div</div>`;
        //     document.querySelector(".exchange").innerHTML = divele;
        // }
        // let btn = document.querySelector('button')
        // let div = document.querySelector('.exchange')
        // let flag = true
        // btn.onclick = function(){
        //     div.innerHTML = '变色'
        //     div.style.color= `${flag ? 'red' : 'blue'}`
        //     flag = !flag
        // }
        
        </script>
</body>
</html>